<template>
  <div class="showWeather">
    <div class="title">未来7天天气数据</div>
    <div class="card">
      <var-row
        :gutter="10"
        v-for="(item, index) in $store.state.forecast.days"
        :key="index"
      >
        <var-col :span="6">{{ $store.state.forecast.weekdays[index] }}</var-col>
        <var-col :span="6">{{
          item.fxDate.substr(5, 5).replace('-', '/')
        }}</var-col>
        <var-col :span="6">
          <img
            :src="
              'https://a.hecdn.net/img/common/icon/202106d/' +
              item.iconDay +
              '.png'
            "
            referrerpolicy="no-referrer"
        /></var-col>
        <var-col :span="6">{{ item.tempMin }}° ~ {{ item.tempMax }}°</var-col>
      </var-row>
    </div>
  </div>
</template>

<script setup></script>

<style lang="less" scoped>
.title {
  margin: 20px 0 5px 12px;

  font-size: 18px;
  font-weight: lighter;
}
.card {
  border: 2px solid #e7eaf0;
  border-radius: 10px;
  width: 100%;
  background: #fff;
  backdrop-filter: blur(1px);

  color: white;

  img {
    opacity: 0.8;
    width: 36px;
    height: 36px;
  }
  .var-row {
    margin: 0;
    width: 100%;
    height: 40px;

    .var-col {
      justify-content: center;
      align-items: center;
      height: 36px;
      color: #000;
      text-align: center;
      background-clip: content-box;
      // background: #3a7afe;
    }
  }
}
</style>
